<template>
  <div class="field"
       :class="linked && 'field__active'">
    <!---->
    <div class="field__label"><label>{{label}}</label>
      <!---->
    </div>
    <div class="field__text">
      <label>{{text}}</label>
      <template v-if="linked">
        <van-icon name="arrow" />
      </template>
    </div>
    <!-- 表单提交隐藏域 -->
    <van-field :name="name"
               style="display: none"
               v-if="canSubmit && name"
               v-model="modelValue"></van-field>
  </div>
</template>

<script>
import { toRef } from 'vue'
export default {
  props: {
    // 标题
    label: {
      type: String,
      required: true
    },
    // 展示信息
    text: {
      type: String,
      required: false
    },
    // 可提交属性
    canSubmit: {
      type: Boolean,
      required: false,
      default: false
    },
    // 提交时的key
    name: {
      type: String,
      required: false
    },
    value: {
      type: String,
      required: false
    },
    // 是否是可点击
    linked: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  setup (props) {
    const modelValue = toRef(props, 'value')
    return {
      modelValue
    }
  }
}
</script>

<style scoped>
.field {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  padding: 10px 15px 10px 15px;
}
.field:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #f7f7f7;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .field:after {
    transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    -o-transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .field:after {
    transform: scaleY(0.3);
    -ms-transform: scaleY(0.3);
    -moz-transform: scaleY(0.3);
    -webkit-transform: scaleY(0.3);
    -o-transform: scaleY(0.3);
  }
}
.field__label {
  font-size: 14px;
  color: #222222;
}
.field__text {
  font-size: 14px;
  color: #666666;
}

.field__active:active {
  background: var(--van-cell-active-color);
}
</style>
